<template>
  <div class="app-container">
    <div class="body-container">
      <div class="operation-bar">
        <div class="bar-title">
          首页图片列表
        </div>
        <div class="bar-btn__wrapper">
          <div class="bar-btn" @click="handleAdd"><i class="el-icon-plus"></i>新增</div>
        </div>
      </div>
      <el-table v-loading="loading" stripe :data="dataList">
        <el-table-column type="index" label="#" align="center" min-width="100"></el-table-column>
        <el-table-column label="图片" prop="picUrl" align="center" min-width="200">
          <template slot-scope="scope">
            <base-image-view :url="downloadUrl +scope.row.picUrl" v-if="scope.row.picUrl" cus_class="list-icon"></base-image-view>
          </template>
        </el-table-column>
        <el-table-column label="图片说明" prop="picDesc" align="center" min-width="200" show-overflow-tooltip />
        <el-table-column label="序号" prop="sortNum" align="center" min-width="100" />
        <el-table-column label="创建时间" prop="createTime" align="center" min-width="170" />
        <el-table-column label="创建者" prop="createBy" align="center" min-width="100" />
        <el-table-column label="操作" align="center" min-width="120" class-name="small-padding fixed-width">
          <div class="table-option" slot-scope="scope">
            <span @click="handleEdit(scope.row)">编辑</span>
            <span class="danger" @click="handleDelete(scope.row)">删除</span>
          </div>
        </el-table-column>
      </el-table>

      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>

    <Edit :title="editTitle" :editType="editType" :editData="editData" :visible.sync="editDialog" @close="getList"></Edit>
  </div>
</template>

<script>
import { carouselList, deleteCarousel } from "@/api/home";
import Edit from './components/edit.vue'
export default {
  name: "file",
  dicts: [],
  components: {
    Edit
  },
  data () {
    return {
      dataList: [],
      loading: true,
      total: 0,
      editTitle: "",
      editDialog: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        type: 2
      },
      editData: {},
      editType: 'add'
    };
  },
  computed:{
    downloadUrl(){
      return process.env.VUE_APP_DOWNLOAD_URL
    }
  },
  created () {
    this.getList();
  },
  methods: {
    // 查询
    async getList () {
      this.loading = true;
      const res = await carouselList(this.addDateRange(this.queryParams))
      this.loading = false;
      if (res.code === 200) {
        this.dataList = res.data || [];
        this.total = res.total || 0;
      } else {
        this.dataList = [];
        this.total = 0;
      }
    },
    // 查询
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 重置
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        type: 2
      }
      this.handleQuery();
    },
    // 新增
    handleAdd () {
      this.editTitle = "新增图片";
      this.editType = 'add'
      this.editDialog = true;
    },
    // 编辑
    handleEdit (row) {
      this.editTitle = "编辑图片";
      this.editType = 'edit'
      this.editData = row
      this.editDialog = true;
    },
    // 删除
    handleDelete (row) {
      this.$modal.confirm('是否确认删除数据？').then(function () {
        return deleteCarousel(row.id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    }
  }
};
</script>